<template>
  <div class="wid">
      <div class="tables" v-if="$route.path == '/authorityManagement'">
          <div class="categoryWrap">
            <div class="serchLeft">
                <span>岗位名称 : </span>
                <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="pageform.name"
                    @keyup.enter.native="getPosition(1)" @blur="getPosition(1)">
                </el-input>
            </div>
          </div>
                <!-- tooltip-effect="dark" -->
          <el-table v-loading="loading" :header-cell-style="{background:'#f5f6f8'}"
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column width="80px" type="selection" ></el-table-column>
                <el-table-column label="序号" width="110px" >
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="岗位名称" >
                    <template slot-scope="scope">{{ scope.row.name }}</template> </el-table-column>
                <el-table-column label="岗位标识" >
                    <template slot-scope="scope">{{ scope.row.info }}</template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="operation" label="操作" >
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="editRow(scope.row,1)" type="info" size="mini "> 编辑 </el-button>
                        <el-button @click.native.prevent="editRow(scope.row,2)" type="danger" size="mini "> 删除 </el-button>
                        <el-button @click.native.prevent="auth(scope.row.id)" type="primary" size="mini "> 权限分配 </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="page">
                <el-pagination style="margin-top: 40px;text-align: center;padding-bottom: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageform.page" :page-sizes="[10, 20, 50, 100]" :page-size="pageform.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageform.total"></el-pagination>
            </div>
      </div>
    <!-- 岗位操作 -->
        <el-dialog :title="dialogTitle" :visible.sync="isPost" width="600px"> 
            <div style="" class="addsection">
                <!-- <div class="dialog_title">基本信息</div> -->
                <el-form label-position="left" :model="post" :rules="postRules" ref="organNameFormres" label-width="130px" class="demo-ruleForm">
                    <el-form-item label="部门名称：" prop="department_id">
                        <el-cascader 
                        v-model="post.department_id" 
                        placeholder="搜索" 
                        :options="dataList" 
                        filterable 
                        style="width:100%"
                        expand-trigger="hover" 
                        :props="{children:'child',label:'name',value:'id',checkStrictly: true}"
                        clearable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="岗位名称：" prop="name">
                        <el-input v-model="post.name"></el-input>
                    </el-form-item>
                    <el-form-item label="岗位标识：" prop="info">
                        <el-input type="textarea" v-model="post.info"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="cf">
                <div class="floright">
                    <el-button @click="isPost=false">取 消</el-button>
                    <el-button :loading="loadingBtn" type="primary" @click="setPosition">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
import {mapState} from 'vuex'
  export default {
    data () {
      return {
          loadingBtn:false,
          isPost:false,
          dialogFormVisible:false,
          loading:false,
          dialogTitle:'修改岗位',
          post:{
                department_id:0,//部门id
                name:'',//岗位名称
                info:'',//岗位标识
            },
            postRules:{
                department_id:[{type: 'array', required: true, message: '请选择部门', trigger: 'change' }],
                name: [{ required: true, message: "请输入岗位名称", trigger: 'blur' }],
                info: [{ required: true, message: "请输入岗位标识", trigger: 'blur' }],
            },
          dataList: [], //部门列表
          pageform:{
            name: null, //姓名/手机号
            limit: 10, //条数
            page: 1, //第几页
            total: 0, //总数
          },
          multipleSelection:[],
          form:{
              category:'',
              categoryNumber:'',
              creator:'',
          },
          tableData: [],
            currentPage2: 5,
      };
    },
    watch:{
        isPost(val){
            if(!val){
                this.post =  this.$options.data().post;
                this.$refs.organNameFormres.resetFields();
            }
        }
    },
    computed:{
        ...mapState('settings',['menuList'])
    },
    components: {},

    created() {
        // console.log(this.utils.jurisdictionJudge("jurisdiction"),"@@@@",this.menuList);

        this.getPosition();
        this.postOrganLists();
    },

    methods: {
        setPosition(){
            this.$refs.organNameFormres.validate(async (valid) => {
                if(!valid)return;
                    let {department_id} = this.post;
                    this.post.department_id = department_id[department_id.length-1];
                    let {code,data} = await this.$Http.setPosition(this.post);
                    if(code){
                        this.$message({ type: "success", message: "修改成功!" });
                        this.isPost = false;
                        this.getPosition();
                    }
            });
        },
        async postOrganLists() {
            //获取部门
            this.loading2 = true;
            let { data,code } = await this.$Http.getDepartment({ name: this.organ_name });
            if(code){
                this.dataList = this.recursion(data)
                console.log(this.dataList,"QWERTYU");
            }
            this.loading2 = false;
        },
        recursion(list,ids){
            return list.map(v=>{
                    ids?v.department_id = [...ids,v.id]:v.department_id=[v.id]
                    if(v.child.length)
                        v.child = this.recursion(v.child,v.department_id)
                    else delete v.child;
                return v;
            });
        },
        recursion2(list,id){
            let str = '';
            for (let i of list) {
                console.log(i);
               if(i.id==id){
                   str =  i.department_id
                   break;
               }
               if(i.child) str = this.recursion2(i.child,id)
            }
            return str
        },
        auth(id){
            this.utils.goUrl('/jurisdiction?id='+id)
        },
        editRow(item,type){
            if(type==2){
                this.$confirm("确定要删除该岗位信息吗？ 删除后不可恢复！", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(async () => {
                   let {code,data} = await this.$Http.delPosition({ id:item.id });
                    if(code){
                        this.getPosition(true);
                        this.$message.success('删除成功!')
                    }
                })
                .catch(() => {
                    
                });
                return;
            }
            //编辑
            this.isPost = true;
            let department_id = this.recursion2(this.dataList,item.department_id)
            console.log(department_id,"VVV");
            this.post = {
                id:item.id,
                department_id,//部门id
                name:item.name,//岗位名称
                info:item.info,//岗位标识
            }
        },
        async getPosition(sou){
            if(sou){
                this.pageform.page = 1;
            }
            this.loading=true;
            let {code,data} = await this.$Http.getPosition(this.pageform);
            this.loading = false;
            if(code){
                this.tableData = data.data;
                this.pageform.limit = data.per_page;
                this.pageform.total = data.total;
            }
        },
        // 侧边栏选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val,"valvalval")
        },
        //分页事件   
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageform.limit = val;
            this.getPosition();
        },
        handleCurrentChange(val) {
            this.pageform.page = val;
            console.log(`当前页: ${val}`);
        }
    },

  }

</script>
<style lang="scss" scoped>
.addsection {
    ::v-deep.el-form-item__content {
        width: 350px;
    }
    ::v-deep .el-dialog__body {
        padding: 30px 50px 30px 100px;
    }
}
.wid{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #F5F5F5;
    .categoryWrap{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        box-sizing: border-box;
        .serchLeft{
            width: 80%;
            display: flex;
            align-items: center;
            span{
                color: #333;
                font-size: 16px;
                margin-right: 20px;
            }
            .el-input{
                width: 300px;
            }
            .el-input__inner{
                border: none;
                background: #f5f5f5;
            }
        }
        .operatingBtn{
            display: flex;
            margin: 0 5px;
            align-items: center;
        }
    
    }
    .placeholder{
        width: 100%;
        height: 10px;
        background: #fff;
    }
    .crumbs{
        padding: 10px 5px;
        color: #666;
        font-size: 16px;
        background: #fff;
        margin-bottom: 20px;
    }
    .tables{
        background: #fff;
        min-height: calc(100vh - 130px);
        border-radius: 12px;
    }
    .page{
        width: 510px;
        margin: 20px auto 0;
    }
}
    // ::v-deep.el-form-item{
    //     display: flex;
    // }

    ::v-deep.el-input{
        width: 100%;
    }
    ::v-deep.el-form-item__content{
        margin-left: 0 !important;
    }
    ::v-deep.el-form-item{
        .el-form-item__label{
            width: 90px ;
        }
    }
</style>